<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="../jquery.js"></script>
    <script src="../axios.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text" id="phone">
        </div>
        <button>下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>

    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label> 用户名：</label>
            <input type="text" value="xxxx">
        </div>
        <div class="input-item">
            <label> 手机号：</label>
            <input type="text" value="xxxx">
        </div>
        <div class="input-item">
            <label>密保问题：</label>
            <input type="text" value="xxxxxxx">
        </div>
        <div class="input-item">
            <label>密保答案：</label>
            <input type="text">
        </div>
        <button>上一步</button>
        <button>下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>

    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text">
        </div>
        <button>上一步</button>
        <button>立即重置</button>
    </div>
    <script>
        $(function () {
            $('#phone').on('change', async function () {
                let text = $(this).val().trim()
                // const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                // if (!reg.test(text)) {
                //     alert('请输入正确手机号')
                // }

                const { data: { data, msg, success } } = await axios.get('http://124.223.14.236:3001/api/user/findPwd', {
                    params: {
                        phone: text
                    }
                })
                if (!success) alert(msg)
                else {
                    fns(data, success)
                }
            })

            function fn(i) {
                $('.title').eq(i).show().siblings('.title').hide()
                $('.box').eq(i).show().siblings('.box').hide()
            }
            fn(0)
            function fns(data, success) {
                const buttons = document.querySelectorAll('button')
                for (let k = 0; k < buttons.length; k++) {
                    const id = data.id
                    buttons[k].addEventListener('click', async function () {
                        let inputs = document.querySelectorAll('input')

                        const username = inputs[1]
                        const phone = inputs[2]
                        const answer = inputs[4].value.trim()
                        const question = inputs[3]
                        const password = inputs[5].value.trim()
                        if (k === 2) {
                            if (answer !== 0) {
                                fn(2)
                            }
                            else {
                                alert('请输入密保答案')
                            }
                        }
                        if (k === 0 || k === 2) fn(k / 2 + 1)
                        if (k === 1 || k === 3) fn((k + 1) / 2 - 1)
                        if (success) {
                            username.value = data.username
                            question.value = data.question
                            phone.value = data.phone
                        }
                        if (k === 4) {
                            let { data: { msg } } = await axios.post('http://124.223.14.236:3001/api/user/resetPwd', {
                                id: `${id}`,
                                password: password,
                                answer: answer,
                            })
                            alert(msg)
                            fn(0)
                            $('#phone').val('')
                        }
                    })
                }
            }
        })






    </script>
</body>

</html>